<div class="portlet light bordered add-order-container" style="margin: 15px;">
    <div class="portlet-title">
        <div class="caption">
            <span class="caption-subject bold">{{formTitle}}
                <span ng-show="!isAddAction">:{{order.id}}</span>
            </span>
        </div>
    </div>
    <div class="portlet-body form form-horizontal">
        <div ng-show="!loadComplete" class="text-center">
            <img src="assets/img/loading-spinner-grey.gif"><span>&nbsp; LOADING...</span>
        </div>
        <form ng-show="loadComplete" novalidate name="addOrderForm" ng-submit="addOrderForm.$valid && submit()">
            <div ng-show="!loading" class="portlet-body form form-horizontal">
                <div class="tabbable-line">
                    <ul class="nav nav-tabs">
                        <li ng-class="{'active': mainActiveTab == 'info'}">
                            <a ng-click="changeMainTab('info')" data-toggle="tab" aria-expanded="false">Info</a>
                        </li>
                        <li ng-class="{'active': mainActiveTab == 'dynamicFields'}">
                            <a ng-click="changeMainTab('dynamicFields')" data-toggle="tab" aria-expanded="false">Dynamic Fields</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane" ng-class="{'active': mainActiveTab == 'info'}" id="info">
                            <div class="form-group">
                                <div class="col-md-3">
                                    <label>Customer</label>
                                    <input-validation-message field="customer" form="addOrderForm"></input-validation-message>
                                    <organization-auto-complete name="customer" ng-model="order.customerId" on-select="customerChange(org)" tag="Customer" required="true"
                                                                ng-disabled="isDisabledMap.customer"></organization-auto-complete>
                                </div>
                                <div class="col-md-3" ng-if="!isAddAction">
                                    <label>Status</label>
                                    <ui-select name="status" ng-model="order.status" ng-disabled="isDisabledMap.status">
                                        <ui-select-match>
                                            <div ng-bind="$select.selected"></div>
                                        </ui-select-match>
                                        <ui-select-choices repeat="item in statusList| filter: $select.search"
                                                           refresh="getStatusList($select.search)" refresh-delay="50">
                                            {{item}}
                                        </ui-select-choices>
                                    </ui-select>
                                </div>
                                <div class="col-md-3">
                                    <label>Order Type</label>
                                    <ui-select ng-model="order.orderType">
                                        <ui-select-match allow-clear="true">
                                            <div ng-bind="$select.selected"></div>
                                        </ui-select-match>
                                        <ui-select-choices repeat="item in orderTypeOptions | filter: $select.search">
                                            <div ng-bind="item"></div>
                                        </ui-select-choices>
                                    </ui-select>
                                </div>
                                <div class="col-md-3">
                                    <label>Priority</label>
                                    <input class="form-control" type="number" placeholder="The higher number, the higher priority." ng-model="order.priorityPoints"
                                           ng-disabled="isDisabledMap.priorityPoints" />
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-3">
                                    <label>Retailer</label>
                                    <organization-auto-complete name="retailer" ng-model="order.retailerId" tag="Retailer" allow-clear="true" ng-disabled="isDisabledMap.retailer" ></organization-auto-complete>
                                </div>
                                <div class="col-md-3">
                                    <label>Carrier</label>
                                    <organization-auto-complete name="carrier" ng-model="order.carrierId" tag="Carrier" on-select="carrierChange(org)"
                                                                ng-disabled="isDisabledMap.carrier || !order.customerId"
                                                                custom-ctrl="carrierCustomCtrl"
                                                                customer-id="order.customerId"
                                                                allow-clear="true"></organization-auto-complete>
                                </div>
                                <div class="col-md-3">
                                    <label>Delivery Service</label>
                                    <ui-select name="deliveryService" ng-model="order.deliveryService" ng-disabled="isDisabledMap.deliveryService">
                                        <ui-select-match allow-clear="true">
                                            <div ng-bind="$select.selected"></div>
                                        </ui-select-match>
                                        <ui-select-choices repeat="item in carrierServiceTypes | filter: $select.search">
                                            <div ng-bind="item"></div>
                                        </ui-select-choices>
                                    </ui-select>
                                </div>
                                <div class="col-md-3">
                                    <label>Ship method</label>
                                    <ui-select name="deliveryService" ng-model="order.shipMethod" ng-disabled="isDisabledMap.shipMethod">
                                        <ui-select-match allow-clear="true">
                                            <div ng-bind="$select.selected"></div>
                                        </ui-select-match>
                                        <ui-select-choices repeat="item in carrierShipMethods | filter: $select.search">
                                            <div ng-bind="item"></div>
                                        </ui-select-choices>
                                    </ui-select>
                                </div>
                               
                            </div>
                            <div class="form-group">
                                <div class="col-md-3">
                                            <label>Freight Term</label>
                                            <ui-select name="freightTerm" ng-model="order.freightTerm" ng-disabled="isDisabledMap.freightTerm">
                                                <ui-select-match allow-clear="true">
                                                    <div ng-bind="$select.selected"></div>
                                                </ui-select-match>
                                                <ui-select-choices repeat="item in freightTermList | filter: $select.search"
                                                                   refresh="getFreightTermList($select.search)" refresh-delay="50">
                                                    <div ng-bind="item"></div>
                                                </ui-select-choices>
                                            </ui-select>
                                </div>
                                <div class="col-md-3">
                                    <label>Purchase Order No.</label>
                                    <input class="form-control" placeholder="Enter PO" ng-model="order.poNo" ng-disabled="isDisabledMap.po"/>
                                </div>
                                <div class="col-md-3">
                                    <label>Shipping Account No.</label>
                                    <input class="form-control" placeholder="Enter Shipping Account No" ng-disabled="isDisabledMap.shippingAccountNo" ng-model="order.shippingAccountNo"
                                    />
                                </div>
                                <div class="col-md-3">
                                    <label>Shipment Tracking Type</label>
                                    <input-validation-message field="shipmentTrackingType" form="addOrderForm"></input-validation-message>
                                    <ui-select name="shipmentTrackingType" ng-model="order.shipmentTrackingType" required="true">
                                        <ui-select-match>
                                            {{$select.selected}}
                                        </ui-select-match>
                                        <ui-select-choices repeat="item in shipmentTrackingTypes | filter: $select.search">
                                            <div>{{item}}</div>
                                        </ui-select-choices>
                                    </ui-select>
                                </div>
                               
                            </div>
                            <div class="form-group">
                                <div class="col-md-3">
                                            <label>Pro No.</label>
                                            <input type="text" class="form-control" ng-model="order.proNo" ng-disabled="isDisabledMap.proNo" />
                                </div>
                                <div class="col-md-3">
                                    <label>Reference</label>
                                    <input class="form-control" placeholder="Enter Reference" ng-model="order.referenceNo" ng-disabled="isDisabledMap.reference"/>
                                </div>
                                <div class="col-md-3">
                                    <label>Customer Sales Order No.</label>
                                    <lt-tags-input placeholder="Enter SO" ng-model="order.soNos" ng-disabled="isDisabledMap.so"></lt-tags-input>
                                </div>
                                <div class="col-md-3">
                                    <label>Total Pallets</label>
                                    <input type="number" class="form-control" ng-model="order.totalPallets" ng-disabled="isDisabledMap.totalPallets"/>
                                </div>
                             
                            </div>
                            <div class="form-group">
                               <div class="col-md-3">
                                            <label>Is Rush</label>
                                            <md-switch class="md-primary" aria-label="Is Rush" ng-disabled="isDisabledMap.isRush" ng-model="order.isRush"
                                                       style="margin-top: 0;margin-bottom: 0;"></md-switch>
                                </div>
                                <div class="col-md-3">
                                    <label>Commitment Include WIP</label>
                                    <md-switch class="md-primary" aria-label="Commitment Include WIP" ng-disabled="isDisabledMap.commitmentIncludeWIP" ng-model="order.commitmentIncludeWIP"
                                               style="margin-top: 0;margin-bottom: 0;"></md-switch>
                                </div>
                                <div class="col-md-3">
                                    <label> Transload</label>
                                    <md-switch class="md-primary" aria-label=" Transload" ng-disabled="isDisabledMap.isTransload" ng-model="order.isTransload" style="margin-top: 0;margin-bottom: 0;"></md-switch>
                                </div>
                                <div class="col-md-3">
                                    <label>Enable Auto Commit</label>
                                    <md-switch class="md-primary" aria-label="Enable Auto Commit" ng-disabled="isDisabledMap.enableAutoCommit" ng-model="order.enableAutoCommit"
                                               style="margin-top: 0;margin-bottom: 0;"></md-switch>
                                </div>

                           
                            </div>
                            <div class="form-group">
                                <div class="col-md-3">
                                            <label>Is Allow Retry Commit</label>
                                            <md-switch class="md-primary" aria-label="Is Allow Retry Commit" ng-disabled="isDisabledMap.isAllowRetryCommit" ng-model="order.isAllowRetryCommit"
                                                       style="margin-top: 0;margin-bottom: 0;"></md-switch>
                                </div>
                                <div class="col-md-3">
                                    <label>Partial Lock Inventory</label>
                                    <md-switch class="md-primary" aria-label="Partial Lock Inventory" ng-disabled="isDisabledMap.allowPartialLockInventory" ng-model="order.allowPartialLockInventory"
                                               style="margin-top: 0;margin-bottom: 0;"></md-switch>
                                </div>
                                <div class="col-md-3">
                                    <label>Long Haul No</label>
                                    <longhaul-auto-complete allow-clear="true" placeholder="Enter Long Haul" customer-id="order.customerId"
                                                            store-no="order.shipToAddress.storeNo" ng-model="order.longHaulId"></longhaul-auto-complete>
                                </div>
                                <div class="col-xs-3">
                                    <label>Delivery Request Date</label>
                                    <lt-date-time value="order.mabd" date-format="yyyy-mm-dd" min-view="2" ng-disabled="isDisabledMap.madb"/>
                                </div>
                             

                            </div>
                            <div class="form-group">
                                <div class="col-xs-3">
                                            <label>Schedule Date</label>
                                            <lt-date-time value="order.scheduleDate" date-format="yyyy-mm-dd" min-view="2" ng-disabled="isDisabledMap.scheduleDate" />
                                </div>
                                <div class="col-md-3" ng-show="!isAddAction">
                                    <label>Create Time</label>
                                    <lt-date-time value="order.placementTime" date-format="yyyy-mm-dd hh:ii:ss" ng-disabled="isDisabledMap.placementTime" />
                                </div>
                                <div class="col-md-3">
                                    <label>Shipped Time</label>
                                    <lt-date-time value="order.shippedTime" date-format="yyyy-mm-dd hh:ii:ss" ng-disabled="true" />
                                </div>
                                <div class="col-md-3">
                                    <label>Ship Not Before</label>
                                    <lt-date-time value="order.shipNotBefore" date-format="yyyy-mm-dd hh:ii:ss" ng-disabled="isDisabledMap.shipNotBefore" />
                                </div>
                               
                            </div>
                            <div class="form-group">
                                <div class="col-md-3">
                                        <label>Ship Not Later</label>
                                        <lt-date-time value="order.shipNoLater" date-format="yyyy-mm-dd hh:ii:ss" ng-disabled="isDisabledMap.shipNotLater" />
                                    </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-6">
                                    <label>Ship From</label>
                                    <label lt-address-selection organization="{{order.customerId}}" lt-address-data="order.shipFromInfo" lt-address-model="order.shipFrom"
                                           ng-show="!isDisabledMap.shipFrom" style="float: right;">
                                        <a>Edit</a></label>
                                    <textarea class="form-control" ng-model="order.shipFrom" disabled="true"></textarea>
                                </div>
                                <div class="col-md-6">
                                    <label>Ship To</label>
                                    <label address-select address-model="order.shipToAddress" address-data="order.shipTo" address-tag="ShipTo" ng-show="!isDisabledMap.shipTo"
                                           style="float: right;"><a>Edit</a></label>
                                    <input-validation-message field="shipTo" form="addOrderForm"></input-validation-message>
                                    <textarea name="shipTo" class="form-control" ng-model="order.shipTo" disabled="true" REQUIRED="true"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-6">
                                    <label>Sold To</label>
                                    <label address-select address-model="order.soldToAddress" address-data="order.soldTo" ng-show="!isDisabledMap.soldTo"
                                           style="float: right;"><a>Edit</a></label>
                                    <textarea name="soldTo" class="form-control" ng-model="order.soldTo" disabled="true"></textarea>
                                </div>
                                <div class="col-md-6">
                                    <label>Store</label>
                                    <label address-select address-model="order.storeAddress" address-data="order.store" address-tag="Store" organization-tag="Retailer"
                                           ng-show="!isDisabledMap.store" style="float: right;"><a>Edit</a></label>
                                    <textarea name="storeAddress" class="form-control" ng-model="order.store" disabled="true"></textarea>
                                </div>
                            </div>
                            <div class="row form-group">
                                <div class="col-md-6">
                                    <label>Bill To</label>
                                    <label address-select address-model="order.billToAddress" address-tag="BillTo" address-data="order.billTo" ng-show="!isDisabledMap.billTo"
                                           style="float: right;"><a>Edit</a></label>
                                    <textarea class="form-control" ng-model="order.billTo" disabled="true"></textarea>
                                </div>
                                <div class="col-md-6">
                                    <label>Pick Note</label>
                                    <textarea type="text" class="form-control" ng-model="order.pickNote" ng-disabled="isDisabledMap.pickNote"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-6">
                                    <label>Label Note</label>
                                    <textarea type="text" class="form-control" ng-model="order.labelNote" ng-disabled="isDisabledMap.labelNote"></textarea>
                                </div>
                                <div class="col-md-6">
                                    <label>Pack Note</label>
                                    <textarea type="text" class="form-control" ng-model="order.packNote" ng-disabled="isDisabledMap.packNote"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-6">
                                    <label>Order Note</label>
                                    <textarea type="text" class="form-control" ng-model="order.orderNote" ng-disabled="isDisabledMap.orderNote"></textarea>
                                </div>
                                <div class="col-md-6">
                                    <label>BOL Note</label>
                                    <textarea type="text" class="form-control" ng-model="order.bolNote" ng-disabled="isDisabledMap.bolNote"></textarea>
                                </div>
                            </div>
                            <div class="tabbable-custom" style="margin-bottom: 0px; overflow: visible">
                                <ul class="nav nav-tabs">
                                    <li ng-class="{'active':activetab == 'itemLine'}">
                                        <a data-toggle="tab" ng-click="changeTab('itemLine')"> Item Lines </a>
                                    </li>
                                    <li ng-class="{'active':activetab == 'materialLine'}">
                                        <a data-toggle="tab" ng-click="changeTab('materialLine')"> Material Lines </a>
                                    </li>
                                    <li ng-class="{'active':activetab == 'trackingNos'}"  ng-show="submitLabel =='Update'" >
                                        <a data-toggle="tab" ng-click="changeTab('trackingNos')"> Tracking Nos </a>
                                    </li>
                                </ul>
                                <div class="tab-content" style="padding:15px;">
                                    <div ng-class="{'active':activetab == 'itemLine'}" class="tab-pane ">
                                        <div class="form-group">
                                            <div class="col-md-12" style="padding-top:7px; padding-left:0px;">
                                                <div class="col-md-3">
                                                    <label>Total QTY: </label>
                                                    <label class="bold">{{order.totalQty}}</label>
                                                </div>
                                                <div class="col-md-3">
                                                    <label>Total Pallet QTY:</label>
                                                    <label class="bold">{{order.totalPalletQty}}</label>
                                                </div>
                                                <div class="col-md-3">
                                                    <label>Total Weight:</label>
                                                    <label class="bold">{{filterToFixed(order.shippedWeight)}} / {{filterToFixed(order.orderWeight)}}</label>
                                                </div>
                                            </div>
                                            <!--ng-show="ifAddOperation"-->
                                            <button type="button" class="btn blue" style="float:right; margin-bottom:15px; margin-right:15px;" ng-click="popUpToCreateItemLine(null)"
                                                    ng-disabled="isUpdateItemLineDisabled('addItemLines')">Add Item Line</button>
                                            <button type="button" class="btn blue" style="float:right; margin-bottom:15px; margin-right:15px;" ng-click="popUpToCreateKittingItem(null)"
                                                    ng-disabled="isUpdateItemLineDisabled('addItemLines')">Add Kitting Item</button>
                                        </div>
                                        <div class="table-scrollable">
                                            <table class="table table-striped table-bordered table-hover">
                                                <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Item</th>
                                                    <th>Lp Template</th>
                                                    <th>Title</th>
                                                    <th>Supplier</th>
                                                    <th>UOM</th>
                                                    <th>Qty</th>
                                                    <th>Pallet Qty</th>
                                                    <th>Order Weight</th>
                                                    <th>Picked Weight</th>
                                                    <th>Shipped Weight</th>
                                                    <th>Adjusted Pallet Qty</th>
                                                    <th>Total Insurance Amount</th>
                                                    <th>Lot#</th>
                                                    <th>Note</th>
                                                    <th>Actions</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr ng-repeat="item in itemLineView track by $index">
                                                    <td>{{(($index + 1) + (current_page_item - 1) *pageSize)}}</td>
                                                    <td>
                                                        <item-display item="item"></item-display>
                                                    </td>
                                                    <td>{{item.lpTemplateName}}</td>
                                                    <td>{{item.titleName}}</td>
                                                    <td>{{item.supplierName}}</td>
                                                    <td>{{item.unit.name}}</td>
                                                    <td>{{item.qty}}</td>
                                                    <td>{{item.palletQty}}</td>
                                                    <td>{{item.orderWeight}}</td>
                                                    <td>{{filterToFixed(item.shippedWeight)}} / {{filterToFixed(item.orderWeight)}}</td>
                                                    <td>{{item.shippedWeight}}</td>
                                                    <td>{{item.adjustedPalletQty}}</td>
                                                    <td>{{item.totalInsuranceAmount}}</td>
                                                    <td>{{item.lotNo}}</td>
                                                    <td>{{item.note}}</td>
                                                    <td>
                                                        <div class="receipt-order-item-actions">
                                                            <a role="button" ng-click="popUpToCreateItemLine(item)" title="Edit" >Edit </a>&nbsp;
                                                            <a role="button" ng-click="deleteItemLine(item)" ng-show="!isUpdateItemLineDisabled('deleteItemLines')" title="Delete">Delete</a>&nbsp;
                                                            <a role="button" ng-click="showKitting(item)" ng-show="item.bundle">Show Kitting</a>
                                                        </div>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <pager total-count="order.itemLines.length" page-size="pageSize" load-content="loadContent_itemLines(currentPage)"></pager>
                                    </div>
                                    <div ng-class="{'active':activetab == 'materialLine'}" class="tab-pane">
                                        <div style="margin-bottom: 15px;">
                                            <button type="button" class="btn blue" style="float:right; margin-bottom:15px;"
                                                    ng-click="createMaterialLine(null)" ng-disabled="isDisabledMap.addMaterialLines">Add Material Line</button>
                                        </div>
                                        <div class="table-scrollable">
                                            <table class="table table-striped table-bordered table-hover">
                                                <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Item</th>
                                                    <th>UOM</th>
                                                    <th>Qty</th>
                                                    <th>Title</th>
                                                    <th>Supplier</th>
                                                    <th>Actions</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr ng-repeat="item in materialLineView track by $index" ng-init="materialIndex = $index">
                                                    <td>{{((materialIndex + 1) + (current_page_material - 1) *pageSize)}}</td>
                                                    <td>
                                                        <item-display item="item"></item-display>
                                                    </td>
                                                    <td>{{item.unitName}}</td>
                                                    <td>{{item.qty}}</td>
                                                    <td>{{item.titleName}}</td>
                                                    <td>{{item.supplierName}}</td>
                                                    <td>
                                                        <div class="receipt-order-item-actions">
                                                            <a role="button" ng-click="createMaterialLine(item)" ng-show="!isDisabledMap.editMaterialLines" title="Edit">Edit </a>&nbsp;
                                                            <a role="button" ng-click="deleteMaterialLine(item)" ng-show="!isDisabledMap.deleteMaterialLines" title="Delete">Delete </a>&nbsp;
                                                        </div>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <pager total-count="order.materialLines.length" page-size="pageSize" load-content="loadContent_materialLines(currentPage)"></pager>
                                    </div>

                                    <div ng-class="{'active':activetab == 'trackingNos'}" class="tab-pane">
                                        <div class="form-group" style="text-align: right">
                                            <button type="button" class="btn blue" style="float:right; margin-bottom:15px; margin-right:15px;" ng-click="popUpToCreateItemTrackingNoLine(null)" ng-disabled="isUpdateItemLineDisabled('addItemLines')"
                                                  >Add Tracking No</button>
                                        </div>
                                        <div class="trackingNOs-itemLines" ng-repeat="trackingnoitem in trackingnoitemLines track by $index  " ng-init="detailsIndex=$index">
                                            <div class="rows" >Tracking No: <span style="margin-right:20px">{{trackingnoitem.trackingNo}}</span>
                                                               Cost: <span>{{trackingnoitem.shippingCost}}</span>
                                                    <div class="remove"><a ng-click="deleteTrackingnoitemLine(trackingnoitemLines,$index)">Remove</a></div>
                                            </div>
                                               <div class="rows">
                                                   <table class="table table-striped table-bordered table-hover">
                                                     <tbody>
                                                       <tr  ng-repeat="item in trackingnoitem.itemLineDetails track by $index ">
                                                           <td style="width: 60%"><laber>Item:</laber>
                                                               <item-display item="item"></item-display>
                                                           </td>
                                                           <td style="width: 15%"><laber>QTY:</laber></laber><span class="span">{{item.qty}}</span></td>
                                                           <td style="width: 15%"><laber>Unit:</laber><span class="span">{{item.unit.name}}</span></td>
                                                           <td style="width: 10%"><a style="float: right" ng-click="deleteTrackingnoItemLineDetail(trackingnoitem.itemLineDetails,$index,detailsIndex)">Remove</a></td>
                                                       </tr>
                                                       </tbody>
                                                   </table>
                                               </div>
                                        </div>

                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" ng-class="{'active': mainActiveTab == 'dynamicFields'}" id="dynamicFields">
                            <div class="row form-group">
                                <div class="col-md-6" ng-repeat="(key, dynamicFieldName) in dynamicFields track by $index"  class="form-control" style="margin-bottom: 10px;">
                                    <div class="col-md-4" style="text-align: right;">
                                        <label style="margin-top: 5px;">{{dynamicFieldName}}:</label>
                                    </div>
                                    <div class="col-md-6">
                                        <input type="text" ng-model="order.dynamicFields[key]" ng-if="key.indexOf('TxtProperty') > -1"  class="form-control" />
                                        <lt-date-time value="order.dynamicFields[key]" ng-if="key.indexOf('DateProperty') > -1" ></lt-date-time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group form-actions right">
                    <waitting-btn type="submit" btn-class="btn blue" value="submitLabel" is-loading="loading"></waitting-btn>
                    <button type="button" class="btn default" ng-click="cancel(editForm)">Cancel</button>
                </div>
            </div>
        </form>
    </div>
</div>
